import {
  FileDoneOutlined,
  FileTextOutlined,
  FireOutlined,
  FundProjectionScreenOutlined,
  ProductOutlined,
} from '@ant-design/icons';
import { createStyles } from 'antd-style';
import Title from 'antd/es/typography/Title';
import React from 'react';

const useStyles = createStyles(() => {
  return {
    indexSubTitle: {
      color: '#fff',
      marginTop: 15,
    },
  };
});

/**
 * 登录页面左侧描述
 */

const LoginDescInfo: React.FC = () => {
  const { styles } = useStyles();

  return (
    <div
      style={{
        width: '100%',
        height: 500,
        backgroundColor: '#1677FF',
        borderRadius: 10,
        padding: 25,
      }}
    >
      <Title level={5} style={{ color: '#fff' }}>
        {'欢迎使用'}
      </Title>
      <Title level={3} style={{ color: '#fff', marginTop: 20 }}>
        {'灵动创意工坊综合'}
      </Title>
      <Title level={3} style={{ color: '#fff', marginTop: 0 }}>
        {'管理系统'}
      </Title>
      <div style={{ marginTop: 40 }}>
        <div className={styles.indexSubTitle}>
          <FireOutlined /> {'组队学习 快速成长'}
        </div>
        <div className={styles.indexSubTitle}>
          <FileTextOutlined /> {'文章发布 记录内容'}
        </div>
        <div className={styles.indexSubTitle}>
          <FileDoneOutlined /> {'考试测评 在线练习'}
        </div>
        <div className={styles.indexSubTitle}>
          <FundProjectionScreenOutlined /> {'成员选拔 路线规划'}
        </div>
        <div className={styles.indexSubTitle}>
          <ProductOutlined /> {'针对培养 直击比赛'}
        </div>
      </div>
      <Title level={5} style={{ color: '#fff', position: 'absolute', bottom: 20 }}>
        {'Design By 灵动创意工坊'}
      </Title>
    </div>
  );
};

export default LoginDescInfo;
